<template>
  <view style="height: 100vh; background: #fff">
    <view class="img-a">
      <view class="t-b">英语听力</view>
    </view>
    <view class="login-view">
      <view class="t-login">
        <!-- 随机诗词 -->
        <view style="font-size: 40rpx; color: rgb(73, 139, 213); margin-top: 30rpx">百科精选</view>
        <scroll-view scroll-y>
          <view class="gushi">
            <view class="gushi-item" v-for="(item, index) in gushi" :key="index">
              <view @tap="xianqing(item)" class="gushi-item1">
                <view style="width: 60%">
                  <view class="gushi-item-title">
                    <view class="gushi-item-title-text">{{ item.biaoti }}</view>
                  </view>
                  <view class="gushi-item-zuozhi">{{ item.neiron }}</view>
                </view>

                <image :src="item.img" mode="scaleToFill" class="gushi-item-img" />
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getTing } from '@/services/kaosi'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import { guanzhuStore, myStore, ShouyeStore } from '@/stores'
const nianji1 = ShouyeStore()
const mingyan = ref<any>('')
const gushi = ref<any>([])
const firstSentence = ref('')
onLoad(async (e: any) => {
  console.log(e.nianji, '年级看一下')

  let res: any = await getTing({ nianji: nianji1.nianji })
  console.log(res, '名言')
  gushi.value = res.data
})
const xianqing = (item) => {
  console.log('222222222222')

  uni.navigateTo({
    url: '../sy_tinglixianqin/index?item=' +item.biaoti,
  })
}
</script>

<style>
@import url('../../static/assets/wxss/iconfont.css');
/*  */
.txt {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}
.img-a {
  width: 100%;
  height: 450rpx;
  background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);
  background-size: 100%;
}
.reg {
  font-size: 28rpx;
  color: #fff;
  height: 200rpx;
  line-height: 90rpx;

  font-weight: bold;
  background: #f5f6fa;
  color: #000000;
  text-align: center;
  margin-top: 0rpx;
  /* 边框蓝色 */
  border: 2px solid #2796f2;
  /* 加阴影 */
  box-shadow: 0 0 15rpx #999;
}

.login-view {
  width: 100%;
  position: relative;
  margin-top: -80rpx;
  background-color: #ffffff;
  border-radius: 25rpx 25rpx 0% 0;
}

.t-login {
  width: 700rpx;
  height: 80%;
  margin: 0 auto;
  font-size: 28rpx;
  padding-top: 80rpx;
}

.t-login button {
  font-size: 28rpx;
  background: #ffe4c4;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
  font-weight: bold;
}

.t-login input {
  height: 90rpx;
  line-height: 90rpx;

  border-bottom: 1px solid #e9e9e9;
  font-size: 28rpx;
}

.t-login .t-a {
  position: relative;
}

.t-b {
  text-align: left;
  font-size: 50rpx;
  color: #ffffff;
  padding: 130rpx 0 0 70rpx;
  font-weight: bold;
  line-height: 70rpx;
}

.t-login .t-c {
  position: absolute;
  right: 22rpx;
  top: 22rpx;
  background: #5677fc;
  color: #fff;
  font-size: 24rpx;
  border-radius: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  padding: 0 25rpx;
}

.t-login .t-d {
  text-align: center;
  color: #999;
  margin: 80rpx 0;
}

.t-login .t-e {
  text-align: center;
  width: 250rpx;
  margin: 80rpx auto 0;
}

.t-login .t-g {
  float: left;
  width: 50%;
}

.t-login .t-e image {
  width: 50rpx;
  height: 50rpx;
}

.t-login .t-f {
  text-align: center;
  margin: 150rpx 0 0 0;
  color: #666;
}

.t-login .t-f text {
  margin-left: 20rpx;
  color: #aaaaaa;
  font-size: 27rpx;
}

.t-login .uni-input-placeholder {
  color: #aeaeae;
}

.cl {
  zoom: 1;
}

.cl:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: '\20';
}

.xieyi {
  margin-left: 70rpx;
  left: 20rpx;
  width: 500rpx;
  display: flex;
  position: absolute;
  justify-content: center;
}
.xieyi .isXY {
  margin-left: 85rpx;
  position: relative;
  top: 10rpx;
  /* 修改复选框的大小 */
  transform: scale(0.6);
}
.xieyi .text-xy {
  margin-left: 10rpx;
  margin-top: 20rpx;
  color: #000000;
  font-size: 25rpx;
}

.biaoqian {
  position: absolute;
  font-size: 64rpx;
  color: #65b2f1;
  /* 细一点 */
  transform: scale(0.8);
  left: 60rpx;
  top: 62rpx;
}
.reqian {
  position: absolute;
  font-size: 20rpx;
  color: #2796f2;
  left: 12rpx;
  top: 1rpx;
  /* 标签上边是浅色 */
}
.meire {
  font-size: 35rpx;
  color: #000000;
  left: 150rpx;
  top: 150rpx;
  /* 字体好看点 */
  font-weight: bold;
  /* 变细字体 */
  transform: scale(0.8);
  /* 楷体字 */
  font-family: 楷体;
}
.shiti {
  position: absolute;
  font-size: 25rpx;
  color: #978f8f;
  right: 150rpx;
  top: 200rpx;
  /* 字体好看点 */
  font-weight: bold;
  /* 变细字体 */
  transform: scale(0.8);
  /* 楷体字 */
  font-family: 楷体;
}
.shousuo {
  position: relative;
  right: 40rpx;
  margin-top: 40rpx;
  width: 700rpx;
}

/* 更多古诗 */
.gushi {
  position: relative;
  height: 100%;
  width: 700rpx;
  color: #343738;
  /* 阴影 */
  box-shadow: 0 0 15rpx #999;
  margin-top: 40rpx;
}
.gushi-item {
  margin-top: 40rpx;
  height: 160rpx;
  width: 100%;
  border-bottom: 1px solid #e9e9e9;
}
.gushi-item1 {
  display: flex;

  justify-content: space-between;
  padding: 0 20rpx;
}
.gushi-item-title {
  /* 加粗黑色 */
  font-weight: bold;
  color: #0c0d0d;
  font-size: larger;
  margin-top: 20rpx;
}
.gushi-item-zuozhi {
  /* 忽略加三点省略号 */
  white-space: nowrap;
  /* 内容换行 */
  overflow: hidden;
  /* 省略号 */
  text-overflow: ellipsis;
  margin-top: 20rpx;
  color: #978f8f;
  font-size: small;
  width: 100%;
  height: 100rpx;
}
.gushi-item-img {
  width: 100%;
  height: 150rpx;
  /* 好看 */
  transform: scale(0.8);
  /* 楷体字 */
}
.gushi-item-content {
  margin-top: 10rpx;
  color: #343738;
}
</style>
